<template>
  <div class="search-box">
    <!-- 定位 -->
    <div class="location">
      <div class="city" @click="handleCityClick">{{currentCityData.cityName || "武汉"}}</div>
      <div class="position" @click="handlePositionClick">
        <span class="text">我的位置</span>
        <img src="@/assets/img/home/icon_location.png" alt="">
      </div>
    </div>

    <!-- 选择日期范围 -->
    <div class="date-range">
      <div class="start">
        <div class="date">
          <span class="tip">入住</span>
          <span class="time">{{startDate}}</span>
        </div>
      </div>
      <div class="stay">共一晚</div>
      <div class="end">
        <div class="date">
          <span class="tip">离店</span>
          <span class="time">{{endDate}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"
import { useRouter } from "vue-router"
import { useCityStore } from "@/store"
import { storeToRefs } from "pinia"
import { formatMonthDay } from "@/utils/formatDate"

// 定位处理
const router = useRouter()
const cityStore = useCityStore()
const { currentCityData } = storeToRefs(cityStore)
const handleCityClick = () => {
  router.push("/city")
}
const handlePositionClick = () => {
  navigator.geolocation.getCurrentPosition((res) => {
    console.log("获取位置成功", res)
  }, (err) => {
    console.log("获取位置失败", err)
  })
}

// 日期处理
const nowDate = new Date()
const startDate = ref(formatMonthDay(nowDate))
const newDate = nowDate.setDate(nowDate.getDate() + 1)
const endDate = ref(formatMonthDay(newDate))

</script>

<style lang="less" scoped>
.location {
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;

  .city {
    flex: 1;
    color: #333;
    font-size: 15px;
  }

  .position {
    width: 74px;
    display: flex;
    align-items: center;

    .text {
      position: relative;
      top: 1px;
      font-size: 12px;
      color: #666;
    }

    img {
      margin-left: 5px;
      width: 18px;
      height: 18px;
    }
  }
}

.date-range {
  height: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 20px;
  color: #999;

  .start {
    flex: 1;
    // line-height: 44px;
    display: flex;
    height: 44px;
    align-items: center;
  }

  .stay {
    flex: 1;
    text-align: center;
    font-size: 12px;
    color: #666;
  }

  .end {
    min-width: 30%;
    padding-left: 40px;
  }

  .date {
    display: flex;
    flex-direction: column;

    .tip {
      font-size: 12px;
      color: #999;
    }

    .time {
      margin-top: 3px;
      color: #333;
      font-size: 15px;
      font-weight: 500;
    }
  }
}
</style>
